<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的家乡</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <!-- 引入初始化css样式 -->
    <link rel="stylesheet" href="./common/base.css">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入头部样式 -->
    <link rel="stylesheet" href="./layout/head/index.css">
    <!-- 引入底部样式 -->
    <link rel="stylesheet" href="./layout/footer/index.css">
    <!-- 引入主要样式 -->
    <link rel="stylesheet" href="./main/index.css">
    <!-- 引入去顶部 -->
    <link rel="stylesheet" href="./layout/helper/index.css">

</head>

<body>
    <div class="container" id="to-head">
        <!-- 头部开始 -->
        <div class="head-container">
            <div class="head-wrapper">
                <div class="nav-wrapper">
                    <h1 class="logo-wrapper">
                        <a href="index.html" class="logo">
                            <img src="./image/logo.png" alt="" class="logo-img">
                        </a>
                    </h1>

                    <div class="nav-list">
                        <ul class="nav-items">
                            <li class="nav-item">
                                <a href="./food/index.html" target="_self" class="nav-link">广西美食</a>
                            </li>
                            <li class="nav-item">
                                <a href="./scenery/index.html" target="_self" class="nav-link">广西美景</a>
                            </li>
                            <li class="nav-item">
                                <a href="./specialty/index.html" target="_self" class="nav-link">广西特产</a>
                            </li>
                            <li class="nav-item">
                                <a href="./festival/index.html" target="_self" class="nav-link">特色节日</a>
                            </li>
                            <li class="nav-item">
                                <a href="./contact/index.html" target="_self" class="nav-link">联系我们</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="login-wrapper">
                    <div class="login-btn">
                        <a href="./login/login.html">
                            <div class="btn">登录</div>
                        </a>
                    </div>
                </div>
                <div class="avatar-wrapper">
                    <div class="avatar">
                        <a href="./personal/index.html">
                            <img src="./image/avatar.jpg" alt="" class="avatar-img">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 主要内容开始 -->
        <div class="main-container">
            <div class="main-wrapper">
                <div class="swiper-wrapper">
                    <div class="swiper-item">
                       <img src="./image/banner.jpg" alt="" class="swiper-img">
                    </div>
                </div>
                <div class="container-wrapper">
                    <div class="type-wrapper food-wrapper">
                        <div class="left-wrapper">
                            <div class="top-wrapper">
                                <div class="icon-wrapper">
                                    <img src="./image/food.svg" alt="" class="icon-img">
                                </div>
                                <div class="title-wrapper">美食</div>
                            </div>
                            <div class="bottom-wrapper">
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/luosifen2.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">螺蛳粉</span>
                                        <div class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/pijiuyu.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">啤酒鱼</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/laoyoufen.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">老友粉</span>
                                        <span class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/guilinmifen.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">桂林米粉</span>
                                        <span class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/tianluoyajiaobao.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">田螺鸭脚煲</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="type-wrapper view-wrapper">
                        <div class="left-wrapper">
                            <div class="top-wrapper">
                                <div class="icon-wrapper">
                                    <img src="./image/风景.svg" alt="" class="icon-img">
                                </div>
                                <div class="title-wrapper">美景</div>
                            </div>
                            <div class="bottom-wrapper">
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/桂林山水.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">桂林山水</span>
                                        <div class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/德天瀑布.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">德天瀑布</span>
                                        <span class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/青秀山.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">青秀山</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/涠洲岛.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">涠洲岛</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/龙脊梯田.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">龙井梯田</span>
                                        <span class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="type-wrapper featival-wrapper">
                        <div class="left-wrapper">
                            <div class="top-wrapper">
                                <div class="icon-wrapper">
                                    <img src="./image/节日营销.svg" alt="" class="icon-img">
                                </div>
                                <div class="title-wrapper">节日</div>
                            </div>
                            <div class="bottom-wrapper">
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/壮族三月三.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">三月三</span>
                                        <div class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/分龙节.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">分龙节</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/盘王节.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">盘王节</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/晒衣节.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">晒衣节</span>
                                        <span class="hot-count">
                                            <img src="./image/hot.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                                <div class="item-wrapper">
                                    <div class="bg-img">
                                        <img src="./image/炮龙节.jpg" alt="" class="item-img">
                                    </div>
                                    <div class="other-info">
                                        <span class="item-title">炮龙节</span>
                                        <span class="hot-count">
                                            <img src="./image/hot2.svg" alt="" class="hot-img" />
                                            <span class="count">99+</span>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主要内容结束 -->
        <!-- 底部开始 -->
        <div class="footer-container">
            <div class="footer-wrapper">
                <div>Copyright © 我的家乡2022 猫猫</div>
            </div>
        </div>
        <!-- 底部结束 -->

        <a href="#to-head">
            <div class="helper-wrapper">
                <div class="to-top">
                    <div class="to-top-img">
                        <img src="./image/totop.svg" alt="">
                    </div>
                    <span class="to-top-title">顶部</span>
                </div>
            </div>
        </a>

    </div>






</body>

</html>